<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" type="text/css" media="screen"
          href="../static/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <ol class="breadcrumb">
        <li><a href="#">用户管理</a></li>
        <li class="active">用户列表</li>
        <li style="float:right">
            <a href="/loginOut">退出</a>&nbsp;&nbsp;&nbsp;&nbsp;</li>
    </ol>

    <!-- 主体内容开始 -->
    <!-- 第一行开始 -->
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <!-- 表单开始 -->
            <form action="" class="form-horizontal">
                <!-- panel开始 -->
                <div class="panel panel-info">
                    <div class="panel-heading"><i class="fa fa-search"></i>&nbsp;&nbsp;查询</div>
                    <!-- panel-body开始 -->
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 ">
                                <div class="form-group">
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="userName"
                                               placeholder="用户名">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- panel-body结束 -->
                    <div class="panel-footer text-right">
                        <button type="reset" name="resetBtn" id="resetBtn"
                                class="btn btn-warning">重置
                        </button>
                        <input type="submit" value="查询" class="btn btn-primary"></input>
                        <button type="button" name="addBtn" class="btn btn-info"
                                onclick="location.href='addUser.html'">添加用户
                        </button>
                    </div>
                </div>
                <!-- panel结束 -->
            </form>
        </div>

        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">用户列表</div>
                <table class="table table-bordered table-hover text-center">
                    <thead>
                    <tr class="info">
                        <td>用户名称</td>
                        <td>用户密码</td>
                        <td>操作</td>
                    </tr>
                    </thead>
                    <tbody id="tb-content">
                    </tbody>
                </table>
            </div>
        </div>

    </div>

</div>
</body>
</html>
<script src="../static/js/axios.min.js"></script>
<script>
    //页面加载完成之后执行
    window.onload = function(){
        //给这个tb-content 赋值
        const url = "/user/list"
        axios.get(url)
            .then(function(res){
                const response = res.data
                const users = response.data

                //解析数据  遍历数据
                let str = "";
                for(let i = 0;i<users.length;i++){
                    //拼接字符串
                    str += `<tr>
									<td>${users[i].username}</td>
									<td>${users[i].password}</td>
									<td>
										<button type="button" name="queryBtn" onclick="toUpdateUserPage(${users[i].id})" class="btn btn-success btn-xs">更新</button>|
										<button type="button" name="queryBtn" onclick="deleteUser(${users[i].id})" class="btn btn-danger btn-xs" >删除</button>
									</td>
								</tr>`;
                }
                //将拼接好的字符串赋值给tb-content
                document.getElementById("tb-content").innerHTML = str;
            })


    }

    function deleteUser(id){

        // alert(id)

        const url = '/user/'+ id
        axios.delete(url)
            .then(function (res) {

                const R = res.data

                if (R.code === 200){
                    alert('删除成功')
                    location.href = '/users/users.html'
                }


            })


    }


    function toUpdateUserPage(id){

        location.href = `/users/updateUser.html?id=${id}`
    }





</script>